<template>
  <span class="form-inp ml10">
    <el-input v-model="queryStr" :placeholder="placeholder" class="search">
      <el-button v-if="queryStr" slot="append" @click.native="resetSearch" icon="el-icon-close"></el-button>
    </el-input>
    <el-button class="ml10" icon="el-icon-search" @click="handleUpdate">查询</el-button>
  </span>
</template>

<script>
export default {
  name: "Search",
  data() {
    return {
      queryStr: ""
    };
  },
  methods: {
    resetSearch() {
      this.queryStr = "";
      this.$store.dispatch("search/setSearch", this.queryStr);
      this.$emit("update");
    },
    handleUpdate() {
      this.$store.dispatch("search/setSearch", this.queryStr);
      this.$emit("update");
    }
  },
  props: ["placeholder"]
};
</script>
 
<style scoped>
</style>